HTML

<!DOCTYPE html>
<html>
    <head><title>Math Games JavaScript</title>
    <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <div class="gameOptions">
            Max number value : <input type="number" value="10" id="maxVal"><br>
            Number of Questions : <input type="number" value="10" id="numQuestions"><br>
            Select Operators : <br>
            <select id="selOpt" multiple>
                <option value="0" selected>&times;</option>
                <option value="1" selected>/</option>
                <option value="2" selected>+</option>  
                <option value="3" selected>-</option>  
            </select>
        </div>
        <div class="game"></div>
        <script src="app.js"></script>
    </body>
</html>

CSS

.output, .message {
    text-align: center;
    font-size: 2em;
}
.gameOptions{
    text-align: center;
    width:50%;
    margin: auto;
    font-size: 0.8em;
    background-color: #ddd;
}
.boxAnswer{
    font-size: 1.4em;
    padding: 12px;
    text-align: center;
    width: 90px;
    background-color: #ddd;
    border: 1px solid #ccc;
    height:65px;
}
.boxSign{
    display: inline-block;
    padding: 10px;
    font-size:2em;
}
.box{
    padding: 5px;
    padding-bottom: 10px;
    text-align: center;
    width: 50px;
    line-height: 55px;
    background-color: #000;
    border: 1px solid #ccc;
    display: inline-block;
    color:white;
    border-radius: 10px;
}
.myBtn{
    border: 1px solid black;
    background-color: red;
    border-radius: 10px;
    text-align: center;
    display: inline-block;
    font-size: 1em;
    color:white;
    padding:5px;
    margin:0 10px;
}
.startBtn {
    text-align: center;
    margin: 20px auto;
    display: block;
    padding: 10px;
    background-color: red;
    border-radius: 10px;
    font-size: 1.5em;
    color:white;
}

JavaScript

const gameArea = document.querySelector('.game');
const gameOptions = document.querySelector('.gameOptions');
const btn = document.createElement('button');
const btn1 = document.createElement('button');
btn.classList.add('startBtn');
const output = document.createElement('div');
//const answer = document.createElement('input');
const message = document.createElement('div');
output.textContent = "Click the button to start the game";
btn.textContent = "Start Game";
btn1.textContent = "Next Question";
//answer.setAttribute('type','number');
//answer.setAttribute('max',999);
//answer.setAttribute('min',0);
output.classList.add('output');
message.classList.add('message');
//answer.classList.add('boxAnswer');
gameArea.append(message);
gameArea.append(output);
gameArea.append(btn);
gameArea.append(btn1);
btn1.style.display = 'none';
const opts = ['*','/','+','-'];
const game = {correct:'',maxValue:10,questions:10,oVals:[0,1,2,3],curQue:0,hiddenVal:3,inplay:false};
const player = {correct:0,incorrect:0};
btn.addEventListener('click',startGame);
btn1.addEventListener('click',buildQuestion);

function startGame(){
    getValues();
    btn.style.display = 'none';
    gameOptions.style.display = 'none';
    buildBoard();
}

function buildBoard(){
    console.log(game.questions);
    output.innerHTML='';
    for(let i=0;i<game.questions;i++){
        const div = document.createElement('div');
        output.append(div);
        buildQuestions(div);
    }
}

function buildQuestions(div){
    let vals = [];
    vals[0] = Math.ceil(Math.random()*(game.maxValue));
    let tempMax = game.maxValue+1;
    game.oVals.sort(()=>{return 0.5 - Math.random()});
    if(game.oVals[0] == 3){
        tempMax = vals[0];
    }
    vals[1] = Math.floor(Math.random()*tempMax );
    if(game.oVals[0]==0){
        if(vals[1]==0){vals[1]=1;}
        if(vals[0]==0){vals[0]=1;}
    }
    if(game.oVals[0] == 1){
        if(vals[0]==0){vals[0]=1;}
        let temp = vals[0] * vals[1];
        vals.unshift(temp);
    }else{
        vals[2] = eval(vals[0] + opts[game.oVals[0]] + vals[1]);
    }
    vals[3] = opts[game.oVals[0]];
    let hiddenVal;
    if(game.hiddenVal != 3){
        hiddenVal = game.hiddenVal;
    }else{
        hiddenVal = Math.floor(Math.random()*3);
    }
    const answer = document.createElement('input');
    const myBtn = document.createElement('div');
    answer.setAttribute('type','number');
    answer.setAttribute('max',999);
    answer.setAttribute('min',0);
    answer.classList.add('boxAnswer');
    answer.addEventListener('keyup',(e)=>{
        if(e.code == 'Enter'){
            checkAnswer();
        }
    })

    function checkAnswer(){
        answer.disabled = true;
        if(answer.correct == answer.value){
            div.style.backgroundColor = 'green';
            myBtn.style.backgroundColor = 'green';
        }else{
            div.style.backgroundColor = 'red';
            myBtn.style.backgroundColor = 'red';
        }
        myBtn.textContent = answer.correct;
        
        //return answer.correct == answer.value;
    }
    for(let i=0;i<3;i++){
        if(hiddenVal == i){
            answer.correct = vals[i];
            div.append(answer);
        }else{
            maker1(div,vals[i],'box');
        }
        if(i==0){
            let tempSign = vals[3] == '*' ? '&times;' : vals[3];
            maker1(div,tempSign ,'boxSign');
        }
        if(i==1){
            maker1(div,'=','boxSign');
        }
        if(i==2){

            myBtn.classList.add('myBtn');
            myBtn.textContent = 'check';
            myBtn.addEventListener('click',checkAnswer,{once:true});
            div.append(myBtn);
        }
    }
    //answer.focus();

}
function maker1(div,v,cla){
    const temp = document.createElement('div');
    temp.classList.add(cla);
    temp.innerHTML = v;
    div.append(temp);
}



/* answer.addEventListener('keyup',(e)=>{
    console.log(e.code);
    console.log(answer.value.length);
    if(answer.value.length > 0 ){
        btn.style.display = 'block';
        btn.textContent = 'check';
        game.inplay = true;
    }
    if(e.code == 'Enter'){
        game.inplay = true;
        btnCheck();
    }
}) */


function btnCheck(){
    btn.style.display = 'none';
    if(game.inplay){
        if(answer.value == game.correct){
            message.innerHTML = 'Correct<br>Answer is '+game.correct;
            player.correct++;
        }else{
            message.innerHTML = 'Wrong<br>Answer is '+game.correct;
            player.incorrect++;
        }

        answer.disabled = true;
        nextQuestion();
    }else{
        //start Game
        getValues();
        gameOptions.style.display = 'none';
        game.curQue = 0;
        buildQuestion();
    }
}

function nextQuestion(){
    btn1.style.display = 'block';
}


function scoreBoard(){
    message.innerHTML = `${game.curQue} of ${game.questions} Questions<br>`;
    message.innerHTML += `Correct : (${player.correct}) vs (${player.incorrect})`;
}

function getValues(){
    game.maxValue = Number(document.querySelector('#maxVal').value);
    game.questions = document.querySelector('#numQuestions').value;
    let temp = document.querySelector('#selOpt');
    let tempArr = [];
    for(let i=0;i<temp.options.length;i++){
        if(temp.options[i].selected){
            tempArr.push(i);
        };
    }
    game.oVals = tempArr;
    console.log(game);
}



function buildQuestion(){
    btn1.style.display = 'none';
    console.log(game.curQue + ' of '+ game.questions);
    if(game.curQue < game.questions){
        game.curQue++;
        scoreBoard();
        output.innerHTML='';
        let vals = [];
        vals[0] = Math.ceil(Math.random()*(game.maxValue));
        let tempMax = game.maxValue+1;
        game.oVals.sort(()=>{return 0.5 - Math.random()});
        if(game.oVals[0] == 3){
            tempMax = vals[0];
        }
        vals[1] = Math.floor(Math.random()*tempMax );
        if(game.oVals[0]==0){
            if(vals[1]==0){vals[1]=1;}
            if(vals[0]==0){vals[0]=1;}
        }
        if(game.oVals[0] == 1){
            if(vals[0]==0){vals[0]=1;}
            let temp = vals[0] * vals[1];
            vals.unshift(temp);
        }else{
            vals[2] = eval(vals[0] + opts[game.oVals[0]] + vals[1]);
        }
        vals[3] = opts[game.oVals[0]];
        let hiddenVal;
        if(game.hiddenVal != 3){
            hiddenVal = game.hiddenVal;
        }else{
            hiddenVal = Math.floor(Math.random()*3);
        }
        answer.value = '';
        answer.disabled = false;
        for(let i=0;i<3;i++){
            if(hiddenVal == i){
                game.correct = vals[i];
                output.append(answer);
            }else{
                maker(vals[i],'box');
            }
            if(i==0){
                console.log(vals[3]);
                let tempSign = vals[3] == '*' ? '&times;' : vals[3];
                maker(tempSign ,'boxSign');
            }
            if(i==1){
                maker('=','boxSign');
            }
        }
        answer.focus();
        //vals[hiddenVal] = '__';
        //output.innerHTML = `${} ${vals[3]} ${vals[1]} = ${vals[2]} `;
    }

}



